<template>
  <div>
    <!-- v-model把value属性和msg变量双向关联到一起 -->
    <!-- <input type="text" v-model="msg"> -->

    <!-- 用vue自己实现v-model -->
    <!-- 1.变量 ->视图 :value="变量名" -->
    <!-- 2.视图 ->变量 @input事件，通过事件对象拿到输入框的值给vue变量 -->
    <!-- input;value固定 -->
    <input type="text" :value="msg" @input="fn">
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    fn (e) {
      // e.target.value - 拿到输入框最新的值(用户输入的)
      this.msg = e.target.value
    }
  }
}
</script>

<style>

</style>
